<template>
  <div id="app">
    <play-tips :play="play" @endOfPlay="endOfPlay"/>
    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="true">
      <router-view />
    </ScaleBox>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import devPixelRatio from "@/utils/monitorZoom.js";
import PlayTips from "@/components/PlayTips.vue";
import ScaleBox from "vue2-scale-box";
export default {
  components: {
    ScaleBox,
    PlayTips
  },
  computed: {
    ...mapState("message", ["socket"]),
    ...mapState("user", ["token", "userId"]),
    websocket() {
      return this.$store.state.message.ws;
    },
  },
  data() {
    return {
      play: false,
    };
  },
  created() {
    // new devPixelRatio().init(); // 初始化页面比例
    //页面销毁时关闭长连接
  },
  watch: {
    // "$route.path": {
    //   handler() {
    //     if (!this.socket && this.token) {
    //       this.socket = new WebSocket(
    //         process.env.VUE_APP_SOCKET_API + '10'
    //       );
    //       this.socket.onmessage = (res) => {
    //         if (res.data === 'alert'){
    //           this.play = true;
    //         }
    //         console.log(res.data)
    //       };
    //       this.SET_SOCKET(this.socket);
    //     }
    //   },
    //   immediate: true
    // }
    websocket(newVal) {
      if (newVal) {
        newVal.onmessage = (event) => {
          // 处理接收到的消息
          console.log('Received message:', event.data);
          console.log(7777);
          if(event.data=="ping"){
          console.log(8888);
            this.$store.commit('user/SET_CALL');
            console.log('ping',this.$store.state.user.call);
            
          }
          if (event.data === 'alert') {
            // this.open();
            this.play = true;
          }
        };
      }
    },
  },
  mounted() {
    window.addEventListener("unload", () => {});
    this.$store.dispatch('startWebSocket');
  },
  beforeDestroy() {
    // if (this.socket) this.socket.close();
  },
  methods: {
    ...mapMutations("message", ["SET_WS"]),
    endOfPlay(){
      this.play = false
    },
    sendMessage(message) {
      this.$store.dispatch('sendWebSocketMessage', message);
    },
    // open() {
    //   this.$alert('有新的预警未处理', '新预警', {
    //     confirmButtonText: '确定',
    //     callback: () => {
    //
    //     }
    //   });
    // }
  }
};
</script>
<style lang="scss">
@import "./style/common.scss";
@import "./style/table.scss";

body {
  margin: 0;
  padding: 0;
  background-color: #212226;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
/* 设置滚动条样式 */
::-webkit-scrollbar {
  width: 6px; /* 设置横向滚动条宽度 */
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #909399;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  // background-color: #f5f7fa;
}
.container {
  overflow-y: auto;
}
.container__header {
  position: sticky;
  top: 0;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* 水平位置、垂直位置、模糊程度、颜色及不透明度 */
  z-index: 9999;
}
.my-sort {
  border-radius: 4px;
  overflow: hidden;
  background-color: #212226; //#404249;
  span {
    display: inline-block;
    width: 98px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
  }
  span:hover {
    color: #fff;
  }
  .active {
    background-color: #404249;
    color: #fff;
  }
}
</style>
